<template>
  <view class="container">
    <u-navbar :autoBack="true" title="联系客服" bgColor="transparent" placeholder></u-navbar>
    <view class="content">
      <view class="title">
        <image
          class="avater"
          show-menu-by-longpress
          :src="info.support_wx_avatar_url"
          mode="aspectFill"
        />
        <view class="avattxt">{{ info.support_wx_nick_name }}</view>
      </view>
      <image class="pic" show-menu-by-longpress :src="info.support_wx_qr_code" mode="widthFix" />
      <text class="qrtext">扫一扫上面的二维码图案，加我为朋友</text>
      <!-- :src="setting.customer_service_qrcode" -->
      <view class="wx-id">
        <text>微信号：{{ info.support_wx_id }}</text>
        <view @click="onCopy" class="copy">复制</view>
      </view>
    </view>
  </view>
</template>

<script>
import { supportInfo } from '@/network/api'
export default {
  data() {
    return {
      info: {},
    }
  },
  computed: {},
  async created() {
    const res = await supportInfo()
    this.info = res.info
    console.log(res)
  },
  methods: {
    onCopy() {
      uni.setClipboardData({
        data: this.info.support_wx_id,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          })
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  min-height: 100vh;
  background: $sub-color;
}
.content {
  background: #fff;
  box-shadow: 0px 4rpx 8rpx 0px rgb(0, 0, 0, 0.05);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 32rpx;
  padding: 102rpx 32rpx 130rpx 32rpx;
  box-sizing: border-box;
  .title {
    width: 100%;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    .avater {
      margin-left: 122rpx;
      width: 84rpx;
      height: 84rpx;
      overflow: hidden;
      border-radius: 20rpx;
    }
    .avattxt {
      margin-left: 22rpx;
    }
  }
  .qrtext {
    color: rgba(163, 163, 163, 1);
    font-size: 24rpx;
    margin: 34rpx 0 78rpx 0;
  }
  .pic {
    width: 418rpx;
  }
  .wx-id {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    .copy {
      color: $main-color;
      font-size: 24rpx;
      margin-left: 24rpx;
    }
  }
}
</style>
